import React, { useCallback, useEffect, useState } from 'react'
import { List, Card, Tag, Space, PullToRefresh, InfiniteScroll, Ellipsis, Button, Toast } from 'antd-mobile'
import http from '../helper/http'
import { PageModel } from '@/models/PageModel'
import { WorkCountModel } from '../models/WorkCountModel'
import qs from 'qs'
import styles from '@/assets/css/workcount-detail.module.less'

import ClipboardJS from 'clipboard';

export default (props: { mode: 'all' | 'mine' }) => {

    const [page, setPage] = useState<PageModel>({ page: 1, size: 20, keywords: '', groupby: ['YYYY-MM-DD'] })
    const [list, setList] = useState<WorkCountModel[]>([]);
    const [hasMore, setHasMore] = useState(true)

    const loadData = () => {
        const hashstr = location.hash;
        const param = hashstr.slice(hashstr.indexOf('?') + 1)
        const queryParam = qs.parse(param) as { dept: string, name: string, day: string }

        const params = Object.assign({}, page, {
            dept: encodeURI(queryParam.dept),
            name: encodeURI(queryParam.name),
            day: queryParam.day,
            groupby: page.groupby[0],
        })

        return http.get('/work-detail', { params }).then(res => {
            const data = res.data
            setHasMore(data.rows.length === page.size)
            return Promise.resolve(data)
        });
    }



    const onRefresh = () => {
        page.page = 1

        setPage(page)

        return loadData().then((res) => {
            setList(res.rows)
        })
    }


    const loadMore = (isRetry: boolean): Promise<void> => {
        if (list.length === 0) {
            page.page = 1
        } else {
            page.page += 1
        }
        setPage(page)

        return loadData().then((res) => {
            setList([...list, ...res.rows])
        })
    }

    useEffect(() => {
        new ClipboardJS('.copyBusiness');
    }, [])

    return (
        <>
            <PullToRefresh onRefresh={onRefresh}>
                <List mode='default'
                    header={
                        <div>工作详情列表</div>
                    }>
                    {list.map((item, index: number) => (
                        <Card key={item.BUSINESS_ID} className={styles.mycard}
                            title={<div>
                                编号：{item.BUSINESS_ID}
                                <Button className='copyBusiness' onClick={
                                    () => {
                                        Toast.show({
                                            content: '复制成功',
                                        })
                                    }
                                } color='primary' fill='none' size='mini' data-clipboard-text={item.BUSINESS_ID}>复制</Button>
                            </div>}
                            bodyClassName={styles.body}
                        >
                            <Space>
                                <Tag color='primary'>{item.USER_NAME}</Tag>
                                <Tag color='success'>{item.DEPTNAME}</Tag>
                                <Tag style={{ width: '80px' }} color='success'>{`工作量:${item.WORK_COUNT}`}</Tag>
                                <Tag style={{ width: '80px' }} color='success'>{`小时数:${item.WORK_TIME}`}</Tag>
                            </Space>
                            <br />
                            <Space>
                                <Tag fill='outline' color='primary'>工单标题</Tag>
                                <Tag fill='outline' color='primary'>日期:{item.TIME_STR_SHOW}</Tag>
                            </Space>
                            <Ellipsis
                                direction='end'
                                content={item.TITLE}
                                expandText='展开'
                                collapseText='收起'
                            />

                            <Tag fill='outline' color='primary'>点数分析</Tag>
                            <Ellipsis
                                direction='end'
                                content={item.DETAIL_INFO}
                                expandText='展开'
                                collapseText='收起'
                            />

                            <Tag fill='outline' color='primary'>医院名称</Tag>
                            <Ellipsis
                                direction='end'
                                content={item.医院名称}
                                expandText='展开'
                                collapseText='收起'
                            />



                            <Tag fill='outline' color='primary'>工单内容</Tag>
                            <Ellipsis
                                direction='end'
                                content={item.问题描述}
                                expandText='展开'
                                collapseText='收起'
                            />
                        </Card>
                    ))}
                </List>
                <InfiniteScroll loadMore={loadMore} hasMore={hasMore} />
            </PullToRefresh >
        </>
    )
}